<template>
  <div
    class="van-hairline--top mt-4"
    v-for="(item, index) in params"
    :key="`costs_${index}`"
  >
    <div class="card-header flex">
      <div>
        <span>费用{{ index + 1 }}</span>
        <span class="text-warning pl-2">（待支付）</span>
      </div>
      <div
        class="text-xs text-danger"
        @click="clickDelete(index)"
      >删除</div>
    </div>
    <div class="card-container">
      <van-field
        v-model="item.fee"
        label="金额"
        type="number"
        placeholder="请输入金额"
      />

      <van-field
        v-model="item.payeeName"
        label="收款方姓名"
        placeholder="请输入收款方姓名"
      />

      <van-field
        v-model="item.payeeBankAccount"
        label="收款方账号"
        placeholder="请输入收款方账号"
      />

      <van-field
        v-model="item.payeeTel"
        label="收款方联系方式"
        placeholder="请输入收款方联系方式"
      />

      <van-field readonly label="费用类别">
        <template #input>
          <van-radio-group v-model="item.category">
            <van-space wrap :size="['20px', '8px']">
              <van-radio
                v-for="item in getMapFormat('meetingPriceType')"
                :key="item.value"
                :name="item.value"
              >{{ item.label }}</van-radio>
            </van-space>
          </van-radio-group>
        </template>
      </van-field>

      <van-field readonly label="发票">
        <template #input>
          <base-upload
            :model-value="item.invoicesFile"
            @uploadSucc="uploadSuccess($event, index)"
            @deleteFile="deleteFile($event, index)"
            type="11"
            :maxFileCount="1000"
          ></base-upload>
        </template>
      </van-field>

      <van-field readonly label="水单">
        <template #input>
          <base-upload
            :model-value="item.shuidanFile"
            @uploadSucc="shuidanUploadSuccess($event, index)"
            @deleteFile="shuidanDeleteFile($event, index)"
            type="14"
            :maxFileCount="1000"
          ></base-upload>
        </template>
      </van-field>

      <van-field readonly label="支付凭证">
        <template #input>
          <img class="img_inner" src="" alt="">
        </template>
      </van-field>
    </div>
  </div>

  <div class="pt-8">
    <van-button
      type="primary"
      block
      size="small"
      icon="plus"
      @click="clickAddFee"
    >添加费用</van-button>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  import { showConfirmDialog } from 'vant';

  import useConstant from '@/hooks/useConstant';
  const { getMapFormat } = useConstant();
  const emits = defineEmits(['update']);

  const paramsItem = {
    category: '',
    fee: '',
    invoicesFile: [],
    invoices: [],
    shuidanFile: [],
    shuidan: [],
    payeeBankAccount: ''
  }
  const params = ref([]);

  function clickAddFee () {
    params.value.push(JSON.parse(JSON.stringify(paramsItem)))
  }

  function uploadSuccess (val, index) {
    val.url = `//${val.url}`
    params.value[index].invoicesFile.push(val)
  }
  function deleteFile (val, index) {
    const fileIndex = params.value[index].invoicesFile.findIndex(item => item.fileId == val.fileId)
    params.value[index].invoicesFile.splice(fileIndex, 1)
  }
  function shuidanUploadSuccess (val, index) {
    val.url = `//${val.url}`
    params.value[index].shuidanFile.push(val)
  }
  function shuidanDeleteFile (val, index) {
    const fileIndex = params.value[index].shuidanFile.findIndex(item => item.fileId == val.fileId)
    params.value[index].shuidanFile.splice(fileIndex, 1)
  }

  function clickDelete (index) {
    showConfirmDialog({
      title: '温馨提示',
      message: '删除后无法恢复，确定要删除吗？',
    }).then(() => {
      params.value.splice(index, 1)
    }).catch(() => {})
  }

  watch(params.value, newVal => {
    emits('update', newVal)
  })
  
  defineExpose({
    params,
    setParams (detail) {
      const costs = detail.costs
      costs.forEach(item => {
        item.category = '' + item.category
        item.invoicesFile = item.invoiceList.map(item => ({
          ...item,
          url: `//${item.fileVisitPath}`,
          fileId: item.id,
        }))
        item.shuidanFile = item.shuidanList.map(item => ({
          ...item,
          url: `//${item.fileVisitPath}`,
          fileId: item.id,
        }))
      })
      params.value = costs
      emits('update', params.value)
    }
  })

</script>